Vue.component('pagination',{
    props:['total_page'],
    template:`  <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>`,
    data(){
        return {
            currentPage:2, //当前页
            total:10,      //总页数
            pageSizes:[2,5,10,100, 200, 300, 400],
            pageSize:5      //每页展示多少条
        }
    },
    methods:{
        handleSizeChange(val) {
            this.pageSize=val  
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            this.currentPage=val
            console.log(`当前页: ${val}`);
          }
    }
})